<template>
  <base-modal :width="modAlProps.width" :isVisible="props.isVisible" :title="modAlProps.title"
    :buttons="sourceCreateTime ? buttons : buttons1" @handleOk="buttonMessage" @handleCancle="handleCancle"
    class="versionComparisonModle">
    <template v-slot:body>
      <div class="versionComparisonBox" id="version_modelBox">
        <baseTabs @changeTabs="changeTopTabs" :activeKey="contentType" :tabsList="tabsList"></baseTabs>
        <div class="versionCententBox">
          <div class="versionCententTitle">
            <span>左({{ sourceCreateTime ? sourceCreateTime : "当前版本" }})</span>
            <span>对比</span>
            <span>右({{ targetCreateTime }})</span>
          </div>
          <div class="versionCentent">
            <div class="versionCententLeft">
              <div v-for="(item, index) in compareData.length > 0 &&
                compareData[contentType].sourceLineResults" class="contentLR">
                <div class="contentLeft" :class="item.diffType != 1 && 'contentLeftRed'">
                  {{ item.lineNo }}
                </div>
                <div v-html="item.line" class="contentRight"></div>
              </div>
            </div>
            <div class="versionCententRight">
              <div v-for="(item, index) in compareData.length > 0 &&
                compareData[contentType].targetLineResults" class="contentLR">
                <div class="contentLeft" :class="item.diffType != 1 && 'contentLeftRed'">
                  {{ item.lineNo }}
                </div>
                <div v-html="item.line" class="contentRight"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </base-modal>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  defineComponent,
  createVNode,
  watch,
} from "vue";
import baseModal from "@/components/modal/baseModal.vue";
import baseTabs from "@/components/tabs/baseTabs.vue";
import { scrollType } from "@/type.d";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { dataSourceType, detailDataItemType } from "@/type";
import request from "@/api/index";
import { Modal, message } from "ant-design-vue";

const props = defineProps({
  VersionIds: {
    type: Array,
    default: [],
  },
  isVisible: {
    type: Boolean,
    default: false,
  },
  contentId: {
    type: Number,
    default: null,
  },
});
console.log(props, "propsprops");
//模态框数据
const modAlProps = reactive<dataSourceType>({
  width: "XL",
  title: "版本对比",
});
const tabsList = ref<dataSourceType[]>([]);
// const tabsList1 = [];
const compareData = ref<dataSourceType[]>([]);
const contentType = ref(0);
const sourceCreateTime = ref<string>("");
const sourceVersionId = ref<string>("");
const targetCreateTime = ref<string>("");
const targetVersionId = ref<string>("");
// props.compareData.map = (s: any) => {};
const formState = ref<dataSourceType>({});
const remark = ref<string>("");

//改变头部tab切换
const changeTopTabs = (activeKey: number) => {
  contentType.value = activeKey;
};
//模态框button按钮个数和文案修改
const emits = defineEmits(["handleOk", "handleCancle"]);
const handleOk = () => {
  emits("handleOk");
};

const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};
let buttons = ref<dataSourceType[]>([]);
let buttons1 = ref<dataSourceType[]>([]);
buttons.value = [
  {
    text: "删除左侧版本",
    type: "dashed",
    cz: "deleteLeft",
  },
  {
    text: "删除右侧版本",
    type: "dashed",
    cz: "deleteRight",
  },
  {
    text: "恢复左侧版本",
    cz: "restoreLeft",
  },
  {
    text: "恢复右侧版本",
    cz: "restoreRight",
  },
];
buttons1.value = [
  {
    text: "删除右侧版本",
    type: "dashed",
    cz: "deleteRight",
  },
  {
    text: "恢复右侧版本",
    cz: "restoreRight",
  },
  {
    text: "保存当前版本",
    cz: "saveVersion",
  },
];
const buttonMessage = async (msg: dataSourceType) => {
  if (msg.cz == "deleteLeft") {
    request
      .fetchContentVersionDelete({
        ids: [sourceVersionId.value],
      })
      .then((res: any) => {
        if (res.code == "00000 00000") {
          handleOk();
          message.success(res.message);
        } else {
          message.error(res.message);
        }
      })
      .catch((err: any) => {
        throw new Error(err);
      });
  } else if (msg.cz == "deleteRight") {
    request
      .fetchContentVersionDelete({
        ids: [targetVersionId.value],
      })
      .then((res: any) => {
        if (res.code == "00000 00000") {
          handleOk();
          message.success(res.message);
        } else {
          message.error(res.message);
        }
      })
      .catch((err: any) => {
        throw new Error(err);
      });
  } else if (msg.cz == "restoreLeft") {
    request
      .fetchContentVersionRestore({ id: sourceVersionId.value })
      .then((res: any) => {
        if (res.code == "00000 00000") {
          handleOk();
          message.success(res.message);
        } else {
          message.error(res.message);
        }
      })
      .catch((err: any) => {
        throw new Error(err);
      });
  } else if (msg.cz == "restoreRight") {
    request
      .fetchContentVersionRestore({ id: targetVersionId.value })
      .then((res: any) => {
        if (res.code == "00000 00000") {
          handleOk();
          message.success(res.message);
        } else {
          message.error(res.message);
        }
      })
      .catch((err: any) => {
        throw new Error(err);
      });
  } else if (msg.cz == "saveVersion") {
    request
      .fetchContentVersionSave({ contentId: props.contentId })
      .then((res: any) => {
        if (res.code == "00000 00000") {
          handleOk();
          message.success(res.message);
        } else {
          message.error(res.message);
        }
      })
      .catch((err: any) => {
        throw new Error(err);
      });
  }
};
// 版本对比
const fetchContentVersionCompare = (val: any) => {
  request
    .fetchContentVersionCompare({
      contentId: props.contentId,
      sourceVersionId: val[0],
      targetVersionId: val[1],
    })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        let results = res.data.results.reverse();
        results.forEach((item: any, index: any) => {
          let data = {
            tabName: item.txtKey,
            key: index,
          };
          tabsList.value.push(data);
        });
        // contentType
        compareData.value.push(...res.data.results);
        sourceCreateTime.value = res.data.sourceCreateTime;
        sourceVersionId.value = res.data.sourceVersionId;
        targetCreateTime.value = res.data.targetCreateTime;
        targetVersionId.value = res.data.targetVersionId;
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
onMounted(async () => {
  fetchContentVersionCompare(props.VersionIds);
});
</script>

<style lang="less" scoped>
.versionComparisonModle {
  .versionComparisonBox {
    .versionCententBox {
      margin-top: 24px;

      .versionCententTitle {
        width: 952px;
        height: 55px;
        background: rgba(0, 0, 0, 0.02);
        padding-right: 24px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        span {
          height: 14px;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
        }

        span:nth-child(2) {
          color: rgba(0, 0, 0, 0.85);
          margin: 0 8px;
        }
      }

      .versionCentent {
        // height: 300px;
        display: flex;

        .versionCententLeft,
        .versionCententRight {
          width: 50%;

          // height: 200px;
          // border: 1px solid seagreen;
          .contentLR {
            display: flex;
            height: fit-content;

            .contentLeft {
              // height: 100%;
              width: 40px;
              background: #f5f5f5;
              display: flex;
              justify-content: center;
              align-items: center;

              font-size: 14px;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.85);
              line-height: 14px;
            }

            .contentLeftRed {
              background: #ffccc7;
            }

            .contentRight {
              padding: 12px 24px;
            }
          }
        }

        .versionCententLeft {
          // background: saddlebrown;
        }

        .versionCententRight {
          // background: firebrick;
        }
      }
    }
  }
}
</style>
